<template>
    <div>
        <div class="yejiTop">
            <img v-bind:src="logoPng">
            <div class="yejiTopUser">
                <div>
                    <p>{{total | totalSum}}</p>
                    <span>总投资(元)</span>
                </div>
                <div class="line">
    
                </div>
                <div>
                    <p>{{sumInvite}}</p>
                    <span>总邀请</span>
                </div>
                <div>
                    <p>{{monthInvite}}</p>
                    <span>当月邀请</span>
                </div>
            </div>
            <svg class="icon rili" aria-hidden="true" v-on:click="riliTrue = !riliTrue">
                <use xlink:href="#icon-rili"></use>
            </svg>
            <!-- <a class="myInvite">我的邀请>></a> -->
            <router-link class="myInvite" v-on:click.native.stop.prevent="doClick('总邀请')" to="/subInvite">我的邀请>></router-link>
            <div v-if="riliTrue" class="riliBoxMask"></div>
            <div v-if="riliTrue" class="riliBox select">
                <div class="riliBoxTiele">
                    <span v-on:click="dateYeats--">
                        <</span>
                            <span>{{dateYeats}}</span>
                            <span v-on:click="dateYeats++">></span>
                </div>
                <div class="riliBoxMonth">
                    <span v-on:click="selectMonth(1)">一月</span>
                    <span v-on:click="selectMonth(2)">二月</span>
                    <span v-on:click="selectMonth(3)">三月</span>
                    <span v-on:click="selectMonth(4)">四月</span>
                    <span v-on:click="selectMonth(5)">五月</span>
                    <span v-on:click="selectMonth(6)">六月</span>
                    <span v-on:click="selectMonth(7)">七月</span>
                    <span v-on:click="selectMonth(8)">八月</span>
                    <span v-on:click="selectMonth(9)">九月</span>
                    <span v-on:click="selectMonth(10)">十月</span>
                    <span v-on:click="selectMonth(11)">十一月</span>
                    <span v-on:click="selectMonth(12)">十二月</span>
                </div>
            </div>
        </div>
        <div class="yejiList">
            <div class="mewTarget">
                <img v-bind:src="noticePng">
                <div class="line"></div>
                <ul>
                    <li v-for="item of targetList" :key="item.id">{{item}}</li>
                </ul>
            </div>
            <div class="yejiListBox">
                <div class="yejiListRow" v-for="item of listdata" :key="item.id">
                    <div class="bidNameBox">
                        <span class="line"></span>
                        <span>{{item.truename}}</span>
                        <span class="bidName">{{item.bidName}}</span>
                        <span class="pull-right">{{ item.bidtime | bidtimeWithoutHMS }} 起息</span>
                    </div>
                    <div class="bidNamePrice">
                        <span class="balance">余额 {{item.balance}}元</span>
                        <span class="line"></span>
                        <span>{{item.periodTime}}</span>
                        <span class="line"></span>
                        <span class="color">投资{{item.userMoney}}元</span>
                    </div>
                </div>
                <div class="moreBtn" @click="getInvestment">{{noMore}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import titleJs from "@/router/title.js"
import showList from "@/components/showList"
import qs from "qs"

export default {
    components: { showList },
    data: function () {
        return {
            total: "0",
            sumInvite: "0",
            monthInvite: "0",
            logoPng: require("@/assets/logo.png"),
            noticePng: require("@/assets/notice.png"),
            riliTrue: false,
            dateYeats: 2017,
            dateMonth: 1,
            targetList: ["暂无新标发布"],
            memberId: window.localStorage.memberId,
            listdata: [],
            page: 1,  // 当前页码
            limit: 10, // 每页条数
            loadType: false,
            dataLength: 16,
            noMore: "点击加载数据"
        }
    },
    filters: {
        bidtimeWithoutHMS: function (value) {
            return value.substring(0, 10)
        },
        totalSum: function (value) {
            if(!value){
                return "0.00"
            }
            return parseFloat(value).toFixed(2)
        }
    },
    created() {
        if (!localStorage.memberId) {
            this.$router.push({ path: '/login' })
        }
    },

    mounted() {
        this.getTargetList();
        this.getUserAccount();
        this.getInvestment()
    },
    methods: {
        doClick(event) {
            titleJs.$emit('titleSpring', event);
        },
        selectMonth(month) {
            let _this = this;
            this.page = 1;
            this.dateMonth = month; 
            // let dayCount = function(){
            //   let d= new Date(_this.dateYeats, _this.dateMonth, 0);
            //   return d.getDate();
            // };
            // console.log(dayCount());
            this.riliTrue = !this.riliTrue;
            let startIntentDate = this.dateYeats + "-" + (this.dateMonth < 10 ? ("0" + this.dateMonth) : this.dateMonth) + "-01 00:00:00";
            let endIntentDate = this.dateYeats + "-" + ((this.dateMonth + 1) < 10 ? ("0" + (this.dateMonth +1)) : (this.dateMonth + 1)) + "-01 00:00:00";
            let param = {
                isMobile: 1,
                memberId: this.memberId,
                page: this.page,
                limit: this.limit,
                startIntentDate: startIntentDate,
                endIntentDate: endIntentDate
            }
            param = qs.stringify(param);
            this.$ajax.post("/salesman/getInvestPersonInvestListOfSalesman.do", param).then(retData => {
                this.listdata = retData.data.data
            })
        },
        getTargetList() {
            this.$ajax.get("/salesman/getNewBidListSalesman.do")
                .then(response => {
                    if (response.data.success) {
                        if (!response.data.data) {
                            this.targetList = response.data.data
                        }
                    }
                })
        },
        getUserAccount() {
            var param = {
                isMobile: 1,
                memberId: this.memberId
            },
                param = qs.stringify(param);
            this.$ajax.post("/salesman/getSalemanStatisticsSalesman.do", param).then(retData => {
                if (retData.data.success) {
                    this.total = retData.data.totalMoney;
                    this.sumInvite = retData.data.totalInvite;
                    this.monthInvite = retData.data.currMonthInvite
                }
            })
        },
        getInvestment() {
            this.noMore = "正在加载数据中";
            if (this.loadType) {
                return
            }
            // if (this.page * this.limit >= this.dataLength + this.limit) {
            //     this.noMore = "没有更多数据了";
            //     return
            // }
            this.loadType = true;
            var param = {
                isMobile: 1,
                memberId: this.memberId,
                page: this.page,
                limit: this.limit
            }
            param = qs.stringify(param);
            this.$ajax.post("/salesman/getInvestPersonInvestListOfSalesman.do", param).then(retData => {
                this.loadType = false;
                this.noMore = "点击加载数据"
                this.dataLength = retData.data.totalCount;
                retData.data.data.forEach(function (i) {
                    if (i.payUnit == "dayPay") {
                        i.periodTime = i.periodTime + "天"
                    }
                    if (i.payUnit == "owerPay") {
                        i.periodTime = (i.periodTime * i.customDate) + "天"
                    }
                    if (i.payUnit == "monthPay") {
                        i.periodTime = i.periodTime + "月"
                    }
                    if (i.payUnit == "yearPay") {
                        i.periodTime = i.periodTime + "年"
                    }
                }, );
                this.listdata = this.listdata.concat(retData.data.data);
                if (retData.data.data == []) {
                    this.noMore = "没有更多数据了";
                    return
                }
                this.page++
            })
        }
    }
}

</script>

<style>
.riliBox.select {
    width: 100%;
    height: 6rem;
    z-index: 99999;
    position: fixed;
    top: 1rem;
    /* left: 10%; */
    /* border-radius: 10px; */
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    font-size: .5rem;
}

.riliBoxMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 99998
}

.riliBoxTiele {
    height: 1rem;
    background: #333a4b;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem
}

.riliBoxMonth {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background: white
}

.riliBoxMonth span {
    flex: 0 0 33.3%;
    line-height: 1.2rem;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee
}

.riliBoxMonth span:nth-child(10),
.riliBoxMonth span:nth-child(11),
.riliBoxMonth span:nth-child(12) {
    border-bottom: none
}

.yejiTop {
    width: 100%;
    height: 2rem;
    background: #333a4b;
    color: #333a4b;
    flex-direction: column;
    text-align: center;
    position: relative
}

.yejiTop>img {
    width: 1.58rem;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    z-index: 2
}

.yejiTopUser,
.mewTarget,
.yejiListRow {
    width: 91%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    margin: 0 auto;
    border-radius: 10px;
    background: white;
    margin-bottom: .3rem
}

.yejiTopUser {
    height: 2rem;
    background: white;
    margin: 0 auto;
    position: relative;
    top: -0.57rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 0
}

.yejiTopUser>div {
    text-align: center
}

.yejiTopUser p {
    font-size: 0.48rem;
}

.yejiTopUser span {
    font-size: 0.253rem;
    color: #999
}

.yejiList {
    display: block;
    background: #eee;
    width: 100%;
    top: 3.17rem;
    height: 76.535%;
    padding-top: 1.86rem;
    z-index: -1
}

.line {
    position: relative;
    width: 2px
}

.rili.icon {
    color: white;
    position: fixed;
    top: .32rem;
    right: .41rem;
    font-size: .6rem;
    z-index: 4
}

.myInvite {
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
}

.mewTarget {
    height: 0.89rem;
    display: flex;
    align-items: center;
    padding-left: .2rem;
    position: relative;
    overflow: hidden
}

.mewTarget>img {
    width: 1.36rem
}

.mewTarget .line {
    height: .4rem;
    margin: 0 .14rem
}

.mewTarget ul {
    font-size: .25rem;
    transform: translate3d(0, 0, 0);
    transition: transform .4s ease-in-out;
    position: absolute;
    top: 0;
    left: 1.86rem;
}

.mewTarget li {
    line-height: .89rem
}

.yejiListBox {
    min-height: 10.55rem
}

.yejiListRow {
    height: 1.95rem;
    margin-bottom: .3rem
}

.bidNameBox {
    height: .8rem;
    /* line-height: .8rem; */
    padding-right: .25rem;
    border-bottom: 1px solid #eee;
    font-size: .3rem;
    display: flex;
    align-items: center;
}

.bidNameBox .line {
    /* float: left; */
    width: .1rem;
    height: .38rem;
    background: #7474ec;
    margin: 0 .25rem;
    /* top: .1rem */
}

.bidName {
    display: inline-block;
    font-size: .2rem;
    color: #eba16b;
    border: 1px solid;
    padding: 0.066rem 0.113rem;
    margin-left: .25rem;
    /* margin-right: 2.55rem */
}

.bidNameBox .pull-right {
    font-size: .2rem;
    color: #999;
    position: absolute;
    right: .6rem
}

.bidNamePrice {
    height: 1.15rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: .3rem
}

.bidNamePrice>span {
    text-align: center;
    flex: 0 0 25%
}

.bidNamePrice>span.balance {
    flex: 0 0 30%
}

.bidNamePrice span.line {
    height: .42rem;
    flex: 0 0 2px
}

.bidNamePrice .color {
    color: #e50012
}

.moreBtn {
    width: 3rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    margin: .5rem auto .1rem auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
</style>
